<template>
	<view>
		<view style="padding-top: 350rpx;width: 60%;margin-left: 20%;" v-if="!token">
			<view class="u-text-center" style="font-size: 30rpx ;font-weight: 550;">请登录体验更多功能~~</view>
			<view>
				<u-button :custom-style="customStyle" :hair-line='false'
					@click="$mHelper.to('/pagesB/login/login',true)">登录</u-button>
			</view>

		</view>
		<!-- <view class="map" v-else-if="!showMap">
			<image src="../../static/map/hui.png"></image>
			<view style="font-size: 32rpx;margin-bottom: 85rpx;">
				<view>您还不是该岗位会员</view>
				<view>学习地图未生成</view>
			</view>
			<button @tap="dredge">开通会员</button>
		</view> -->
		<view class="" v-else-if="!showMap" style="margin-top: 300rpx;width: 60%;margin-left: 20%;">
			<u-empty icon-size="280" text="暂无数据~" src="/static/map/hui.png"></u-empty>
			<view>
				<u-button :custom-style="customStyle" :hair-line='false'
					@click="$mHelper.to('/pages/study/choice/transaction/transaction?pid='+pid,true)">开通会员</u-button>
			</view>
		</view>
		<view v-show="showMap">
			<u-navbar :title="title" :is-back="false"></u-navbar>
			<view class="mdx-center-xs">
				<view class="map_ding">
					<view class="dis" style="text-align: center;">
						<u-search style="width: 80%;" :show-action="false"></u-search>
						<view style="width: 20%;" @click="news">
							<u-icon name="bell-fill" color="#999999"></u-icon>
							<view style="font-size: 20rpx;color: #999999; ">消息</view>
						</view>
					</view>
					<view class="">
						<scroll-view :scroll-x="true" class="u-flex">
							<view class="kec" :class="mp==0?'selectClass':''" @click="change(0,)" :key='index'>
								全部课程</view>
							<view class="kec" :class="mp==(index+1)?'selectClass':''" @click="change((index+1),item)"
								v-for="(item,index) in mapList" :key='index'>
								{{item.unitname}}
							</view>

						</scroll-view>

						<!-- <view
							style="width: 76%; overflow-x: auto;display: -webkit-box;-webkit-overflow-scrolling: touch;">
							<view :class="{'mapid':mp == i}" @click="change(item,i)" style="margin-left: 20rpx;"
								v-for="(item,i) in mapList" :key="i">
								{{item.unitname}}
							</view>
						</view> -->
						<!-- <view
							style="width: 76%; overflow-x: auto;display: -webkit-box;-webkit-overflow-scrolling: touch;">
							<view :class="{'mapid':mp == i}" @click="change(item,i)" style="margin-left: 20rpx;"
								v-for="(item,i) in mapList" :key="i">
								{{item.unitname}}
							</view>
						</view> -->
					</view>
				</view>

				<view style="margin-top: 200rpx;">
					<view class="margin-top25rpx" style="position: relative;margin-bottom: 180rpx;"
						v-for="(i,k) in mapList" :key="k" :id="'k'+k">
						<view style="height: 200rpx;"></view>
						<view class="map_hezi">
							<view class="cen">
								<view style="text-align: center;" @click.stop="toListPage(i.id)">
									<view style="font-size: 35rpx;">{{i.unitname}}</view>
									<view style="font-size: 20rpx;">点击查看</view>
								</view>
							</view>
							<view @click.stop="toListPage(i.id,item.id,item.labelname)" class="cent"
								:class="['item' + (index+1)]" v-for="(item,index) in  i.tCurriculumList" :key="index">
								{{item.labelname}}
								<view :class="['linep' + (index+1)]"></view>
							</view>
						</view>
						<view>
							<image class="map_img" src="../../static/jian.png"></image>
						</view>
					</view>
				</view>

			</view>
		</view>
		<!-- <u-popup v-model="show" mode="center" width="500"   >
			<view style="text-align: center;" class="hui66 padding30rpx">
				<image class="hui_img" src="../../static/map/hui.png"></image>
				<view>您还不是会员</view>
				开通会员享受更多优惠
			</view>
			<view class="choice-line" @click="transaction" > 
				开通会员
			</view>
		</u-popup> -->
		<!-- <scroll-view scroll-x="true" >
			<view style="white-space: nowrap;" class="u-flex"><view v-for="item in 100">{{item}}</view></view>
		</scroll-view> -->
		<u-popup v-model="show" mode="center" width="500">
			<view style="text-align: center;" class="hui66 padding30rpx">
				<image class="hui_img" src="../../static/map/hui.png"></image>
				<view>开通岗位会员可以拥有</view>
				专属的岗位学习地图，享受岗位内
				全部课程、学习、考评、竞赛权益
			</view>
			<view class="dis choice-line">
				<view class="choice_zan" @click="cancel">暂不开通</view>
				<view class="hui66lv choice_open" @click="transaction">开通会员</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				mapList: [],
				ico: 0,
				title: '岗位1学习地图',
				current: 0,
				show: false,
				showMap: false,
				mp: -1,

				pid: 0,
				pidName: '',
				customStyle: {
					marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: '#fff',
					background: '#00A29A'
				},
			}
		},
		onShow() {
			if (!this.token) {
				return
			}
			//获取当前用户岗位
			this.getGwInfo();
		},
		methods: {
			getGwInfo() {
				this.$http.get('app/UserController/addUserPost').then(res => {
					if (res.code == 200) {
						if (this.pid != res.data.pid) {
							//已选择会员
							this.getUser(res.data.pid)
							this.selectUnitList(res.data.pid)
						}
						this.pid = res.data.pid
						this.pidName = res.data.pname
						if(res.data.examination==false){
							this.$mHelper.schoolTest(res.data.pid)
						}
						uni.hideLoading();
					} else {
						this.$mHelper.toast(res.message)
					}
				})
			},
			//查询岗位列表
			selectUnitList(id) {
				this.$http.get('app/PostController/selectUnitList', {
					postId: id
				}).then(res => {
					if (res.code == 200) {
						this.mapList = res.data;
					}
				})
				return;
				uni.request({
					method: 'GET',
					url: this.$api + '/app/PostController/selectUnitList',
					header: {
						'token': uni.getStorageSync('token')
					},
					data: {
						postId: id
					},
					success: (res) => {
						console.log(res.data, '查询岗位单元信息1')
						if (res.data.code == 200) {
							this.list = res.data.data
							// this.mapList = res.data.data
							for (let i = 0; i < res.data.data.length; i++) {
								console.log('------------')
								console.log(res.data.data[i].id)
								uni.request({
									method: 'GET',
									url: this.$api + '/app/UnitPostContrller/selectAlls',
									data: {
										unid: res.data.data[i].id
									},
									header: {
										'token': uni.getStorageSync('token')
									},
									success: (re) => {
										console.log('------查询单元的标签------', re.data)
										var tp = []
										if (re.data.code == 200) {
											this.mapList.push({
												name: res.data.data[i].unitname,
												data: re.data.data,
												id: res.data.data[i].id

											})
											console.log('this.mapList', this.mapList)
										}
									}
								})
							}
						} else {

						}
					},
					fail(err) {
						console.log(err)
					}
				})
			},

			// 查询用户是否为当前岗位会员
			getUser(id) {
				this.$http.get('app/UserController/selectUserYESMember', {
					pid: id
				}).then(res => {
					if (res.code == 200) {
						this.showMap = res.data
					}
				})
			},
			//开通会员
			transaction() {
				this.$mHelper.to('/pages/study/choice/transaction/transaction?pid=' + this.pid);
			},
			//暂不开通
			cancel() {
				this.show = false
			},
			// enter(i) {
			// 	uni.navigateTo({
			// 		url: '/pages/map/curriculums/curriculums?name=' + i.unitname + '&id=' + i.id
			// 	})
			// },
			// biao(i) {
			// 	console.log(i);
			// 	return;
			// 	uni.navigateTo({
			// 		url: './curriculums/curriculums?name=' + i.name + '&id=' + i.id
			// 	})
			// },
			toListPage(unid, labelId, tabText) {
				console.log(unid);
				if (labelId) {
					this.$mHelper.to('/pages/map/curriculums/curriculums?unid=' + unid + '&lid=' + labelId + '&tabText=' +
						tabText)
				} else {
					this.$mHelper.to('/pages/map/curriculums/curriculums?unid=' + unid)
				}
			},
			//单元课程
			complete() {
				uni.navigateTo({
					url: './complete/complete'
				})
			},

			change(i, item) {


				//
				if (i == 0) {
					this.$mHelper.to('/pages/map/complete/complete?id=' + this.pid + '&title=' + this.pidName)
					// uni.pageScrollTo({
					// 	scrollTop: 0,
					// 	duration: 300,
					// 	fail: (e) => {
					// 		console.log(e);
					// 	}
					// });
					// return;
				} else {
					console.log(item);
					// this.$mHelper.to('/pages/map/unitTesting/unitTesting?id=' + item.id + '&title=' + this.pidName)

					this.$mHelper.to('/pages/map/curriculums/curriculums?unid=' + item.id)
					// /pages/map/unitTesting/unitTesting
				}
				console.log('#k' + (i - 1));
				uni.pageScrollTo({
					// scrollTop: 400 * (i-1),
					selector: '#k' + (i - 1),
					duration: 300,
					fail: (e) => {
						console.log(e);
					}
				});
				this.mp = i
				return;
				uni.navigateTo({
					url: './curriculums/curriculums?name=' + i.unitname + '&id=' + i.id
				})
			},
			//开通会员
			dredge() {
				this.$mHelper.to('/pages/study/choice/transaction/transaction?pid=' + this.pid);
			},
			//消息
			news() {
				uni.navigateTo({
					url: '../term/news/news'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mapid {
		color: #666666;
	}

	.choice_open {
		width: 49%;
		text-align: center;
	}

	.choice_zan {
		border-right: 1rpx solid #dcdcdc;
		text-align: center;
		width: 49%;
		color: #666666;
	}

	.huiyuan {
		width: 35rpx;
		height: 26rpx;
		margin-left: 20rpx;
	}

	.choice-line {
		border-top: 1rpx solid #dcdcdc;
		height: 80rpx;
		line-height: 80rpx;
		margin-top: 40rpx;
	}

	.hui_img {
		width: 200rpx;
		height: 190rpx;
	}

	// .choice-line{
	// 	background: #00a29a;
	// 	width: 100%;
	// 	color: #FFFFFF;
	// 	text-align: center;
	// 	line-height: 80rpx;
	// 	height: 80rpx;
	// 	margin-top: 40rpx;
	// 	border-radius:0 0 15rpx 15rpx  ;
	// }
	.map_ding {
		position: fixed;
		padding: 25rpx 0;
		top: 150rpx;
		width: 100%;
		z-index: 999;
		background: #FFFFFF;
	}

	.kec {
		// background: #E5F8F7;
		display: inline-block;
		border-radius: 40rpx;
		padding: 0 25rpx;
		height: 60rpx;
		line-height: 60rpx;
		margin-top: 5rpx;
		color: #606266;
	}

	.selectClass {
		background: #E5F8F7;
	}

	.map_img {
		width: 60rpx;
		height: 110rpx;
		position: absolute;
		bottom: -150rpx;
		right: 45.5%;
	}

	.cent {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		font-size: 20rpx;
	}

	.item1 {
		background-color: #E37D8F;
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		border: 6rpx solid #FFFFFF;
		top: 0;
	}

	.linep1 {
		border-bottom: 3rpx dashed #00A29A;
		width: 150rpx;
		position: absolute;
		margin-top: 125rpx;
		transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		/* IE 9 */
		-moz-transform: rotate(90deg);
		/* Firefox */
		-webkit-transform: rotate(90deg);
		/* Safari 和 Chrome */
		-o-transform: rotate(90deg);
	}

	.item2 {
		background-color: #F19125;
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		border: 6rpx solid #FFFFFF;
		left: 0;
		top: 100rpx;
	}

	.linep2 {
		border-bottom: 3rpx dashed #00A29A;
		width: 210rpx;
		position: absolute;
		margin-top: 95rpx;
		left: 68rpx;
		transform: rotate(35deg);
		-ms-transform: rotate(35deg);
		/* IE 9 */
		-moz-transform: rotate(35deg);
		/* Firefox */
		-webkit-transform: rotate(35deg);
		/* Safari 和 Chrome */
		-o-transform: rotate(35deg);
	}

	.item3 {
		background-color: #E38F4C;
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		border: 6rpx solid #FFFFFF;
		right: 0;
		top: 100rpx;
	}

	.linep3 {
		border-bottom: 3rpx dashed #00A29A;
		width: 210rpx;
		position: absolute;
		top: 135rpx;
		right: 65rpx;
		transform: rotate(150deg);
		-ms-transform: rotate(150deg);
		/* IE 9 */
		-moz-transform: rotate(150deg);
		/* Firefox */
		-webkit-transform: rotate(150deg);
		/* Safari 和 Chrome */
		-o-transform: rotate(150deg);
	}

	.item4 {
		background-color: #FFCC4D;
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		border: 6rpx solid #FFFFFF;
		left: 0;
		bottom: 100rpx;
	}

	.linep4 {
		border-bottom: 3rpx dashed #00A29A;
		width: 210rpx;
		position: absolute;
		bottom: 135rpx;
		left: 65rpx;
		transform: rotate(150deg);
		-ms-transform: rotate(150deg);
		/* IE 9 */
		-moz-transform: rotate(150deg);
		/* Firefox */
		-webkit-transform: rotate(150deg);
		/* Safari 和 Chrome */
		-o-transform: rotate(150deg);
	}

	.item5 {
		background-color: #400848;
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		border: 6rpx solid #FFFFFF;
		right: 0;
		bottom: 100rpx;
	}

	.linep5 {
		border-bottom: 3rpx dashed #00A29A;
		width: 210rpx;
		position: absolute;
		bottom: 140rpx;
		right: 65rpx;
		transform: rotate(35deg);
		-ms-transform: rotate(35deg);
		/* IE 9 */
		-moz-transform: rotate(35deg);
		/* Firefox */
		-webkit-transform: rotate(35deg);
		/* Safari 和 Chrome */
		-o-transform: rotate(35deg);
	}

	.item6 {
		background-color: #6EE1EA;
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		border: 6rpx solid #FFFFFF;
		bottom: 0;
	}

	.linep6 {
		border-bottom: 3rpx dashed #00A29A;
		width: 150rpx;
		position: absolute;
		bottom: 160rpx;
		transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		/* IE 9 */
		-moz-transform: rotate(90deg);
		/* Firefox */
		-webkit-transform: rotate(90deg);
		/* Safari 和 Chrome */
		-o-transform: rotate(90deg);
	}

	.item7 {
		background-color: #FFFFFF;
		border: 1rpx solid #d9d9d9;
		box-shadow: 5rpx 5rpx 5rpx #d3d3d3;
		border-radius: 50%;
		font-size: 20rpx;
		width: 88rpx;
		height: 88rpx;
		position: absolute;
		color: #00a29a;
		top: 115rpx;
		left: 190rpx;
	}

	.linep7 {
		width: 78rpx;
		position: absolute;
		top: 115rpx;
		left: 55rpx;
		border-bottom: 3rpx dashed #00A29A;
		transform: rotate(55deg);
		-ms-transform: rotate(55deg);
		/* IE 9 */
		-moz-transform: rotate(55deg);
		/* Firefox */
		-webkit-transform: rotate(55deg);
		/* Safari 和 Chrome */
		-o-transform: rotate(55deg);
	}

	.item8 {
		background-color: #FFFFFF;
		border: 1rpx solid #d9d9d9;
		box-shadow: 5rpx 5rpx 5rpx #d3d3d3;
		border-radius: 50%;
		font-size: 20rpx;
		width: 88rpx;
		height: 88rpx;
		position: absolute;
		color: #00a29a;
		bottom: 115rpx;
		right: 190rpx;
	}

	.linep8 {
		width: 78rpx;
		position: absolute;
		bottom: 115rpx;
		right: 45rpx;
		border-bottom: 3rpx dashed #00A29A;
		transform: rotate(55deg);
		-ms-transform: rotate(55deg);
		/* IE 9 */
		-moz-transform: rotate(55deg);
		/* Firefox */
		-webkit-transform: rotate(55deg);
		/* Safari 和 Chrome */
		-o-transform: rotate(55deg);
	}

	.item9 {
		background-color: #FFFFFF;
		border: 1rpx solid #d9d9d9;
		box-shadow: 5rpx 5rpx 5rpx #d3d3d3;
		border-radius: 50%;
		font-size: 20rpx;
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		color: #00a29a;
		top: 270rpx;
		left: 40rpx;
	}

	.linep9 {
		width: 125rpx;
		position: absolute;
		left: 100rpx;
		border-bottom: 3rpx dashed #00A29A;
		transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		/* IE 9 */
		-moz-transform: rotate(180deg);
		/* Firefox */
		-webkit-transform: rotate(180deg);
		/* Safari 和 Chrome */
		-o-transform: rotate(180deg);
	}

	.item10 {
		background-color: #FFFFFF;
		border: 1rpx solid #d9d9d9;
		box-shadow: 5rpx 5rpx 5rpx #d3d3d3;
		border-radius: 50%;
		font-size: 20rpx;
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		color: #00a29a;
		top: 270rpx;
		right: 40rpx;
	}

	.linep10 {
		width: 125rpx;
		position: absolute;
		right: 100rpx;
		border-bottom: 3rpx dashed #00A29A;
		transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		/* IE 9 */
		-moz-transform: rotate(180deg);
		/* Firefox */
		-webkit-transform: rotate(180deg);
		/* Safari 和 Chrome */
		-o-transform: rotate(180deg);
	}

	.item11 {
		background-color: #FFFFFF;
		border: 1rpx solid #d9d9d9;
		box-shadow: 5rpx 5rpx 5rpx #d3d3d3;
		border-radius: 50%;
		font-size: 20rpx;
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		color: #00a29a;
		top: 40rpx;
		right: 140rpx;
	}

	.linep11 {
		width: 150rpx;
		position: absolute;
		top: 155rpx;
		right: 40rpx;
		border-bottom: 3rpx dashed #00A29A;
		transform: rotate(125deg);
		-ms-transform: rotate(125deg);
		/* IE 9 */
		-moz-transform: rotate(125deg);
		/* Firefox */
		-webkit-transform: rotate(125deg);
		/* Safari 和 Chrome */
		-o-transform: rotate(125deg);
	}

	.item12 {
		background-color: #FFFFFF;
		border: 1rpx solid #d9d9d9;
		box-shadow: 5rpx 5rpx 5rpx #d3d3d3;
		border-radius: 50%;
		font-size: 20rpx;
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		color: #00a29a;
		bottom: 40rpx;
		left: 140rpx;
	}

	.linep12 {
		width: 150rpx;
		position: absolute;
		bottom: 155rpx;
		left: 40rpx;
		border-bottom: 3rpx dashed #00A29A;
		transform: rotate(125deg);
		-ms-transform: rotate(125deg);
		/* IE 9 */
		-moz-transform: rotate(125deg);
		/* Firefox */
		-webkit-transform: rotate(125deg);
		/* Safari 和 Chrome */
		-o-transform: rotate(125deg);
	}

	.cen {
		background: #A980EC;
		width: 150rpx;
		height: 150rpx;
		padding-top: 30rpx;
		color: #FFFFFF;
		border-radius: 50%;
		position: absolute;
		// display: flex;
		// align-items: center;
		// justify-content: center;
	}

	.swiper {
		height: 100vh;
	}

	.map_hezi {
		// background-color: #007AFF;
		width: 100%;
		height: 650rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		text-align: center;
	}

	.map {
		text-align: center;

		image {
			width: 300rpx;
			height: 300rpx;
			margin-top: 292rpx;
		}
	}
</style>
